<!--/**-->
<!--* 匠言知识付费-->
<!--* Author: 山西匠言网络科技有限公司-->
<!--* This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.-->
<!--*/-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>匠言知识付费安装向导</title>
    <link rel="stylesheet" href="../static/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../static/assets/module/admin.css?v=318"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        [lay-filter="formStepsStep"] .layui-form-item
        {
            margin-bottom: 25px;
        }
        .code_sh{
            background-color: #282c34;
            padding: 15px;
            color: #98c379;
            word-wrap: normal;
            word-break: break-all;
            margin: 20px auto;
            display: none;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding-top: 40px;">
            <h1 style="text-align: center;margin: 38px 0;">匠言知识付费安装向导</h1>
            <!-- 分布表单开始 -->
            <div class="layui-tab layui-steps layui-steps-readonly" lay-filter="formStepsStep"
                 style="max-width: 650px;">
                <!-- 标题 -->
                <ul class="layui-tab-title">
                    <li class="layui-this">
                        <i class="layui-icon layui-icon-ok">1</i>
                        <span class="layui-steps-title">第一步</span>
                        <span class="layui-steps-content">Swoole Loader扩展安装</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">2</i>
                        <span class="layui-steps-title">第二步</span>
                        <span class="layui-steps-content">安装环境检测</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">3</i>
                        <span class="layui-steps-title">第三步</span>
                        <span class="layui-steps-content">配置数据库信息</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">4</i>
                        <span class="layui-steps-title">第四步</span>
                        <span class="layui-steps-content">开始安装</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">5</i>
                        <span class="layui-steps-title">第五步</span>
                        <span class="layui-steps-content">安装成功</span>
                    </li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">操作系统：<span id="systemOs"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">PHP版本：<span id="phpVersion"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">PHP运行环境：<span id="phpEnv"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">PHP配置文件：<span id="phpIni"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">PHP扩展安装目录：<span id="phpExt"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">PHP是否线程安全：<span id="phpThe"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">Swoole_loader是否安装：<span id="swooleExist"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">Swoole_loader版本：<span id="swooleVersion"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px; display: none;" >温馨提示：当前环境使用的PHP为：</div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px; display: none;">错误信息：<span id="errmsg"></span></div>
                        <br>
                        <div id="showmsg" style="color: #1abf0c;padding-top: 20px;"></div>
                        <h3 id="showmsg2" style="color: red;padding-top: 20px;display: none;">2.安装完成Swoole Loader后请重启php-fpm和Nginx服务，并刷新此页面</h3>
                        <div class="code_sh">

                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-sm layui-btn-normal" id="swoole_install" style="height: 38px;line-height: 38px;" lay-tips="请先安装swoole loader扩展">&emsp;Swoole一键安装
                                </button>
                                <button class="layui-btn layui-btn-disabled site-demo-active" disabled id="zeronext"  lay-tips="请先安装swoole loader扩展">&emsp;下一步&emsp;
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                            <div class="layui-form-item" style="margin-top: 25px;display: flex;align-items: center;">
                                <label class="layui-form-label" style="width: 160px">数据库文件是否存在:</label>
                                <div class="layui-form-mid ">zsffzxkc.sql &nbsp;&nbsp;&nbsp;<span style="color: #5FB878;" id="checkSql"></span></div>
                            </div>
                            <div class="layui-form-item" style="margin-top: 25px;display: flex;align-items: center; ">
                                <label class="layui-form-label" style="width: 160px">文件目录权限:</label>
                                <div class="layui-form-mid ">application &nbsp;&nbsp;&nbsp;<span style="color: #5FB878;" id="checkInfo"></span></div>
                            </div>
                            <div class="layui-form-item" style="margin-top: 25px;display: flex;align-items: center;">
                                <label class="layui-form-label" style="width: 160px">php版本检测:</label>
                                <div class="layui-form-mid ">php7.1 &nbsp;&nbsp;&nbsp;<span style="color: #5FB878;" id="checkPhpVersion"></span></div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="two_check" style="height: 38px;line-height: 38px;" lay-tips="请先检测安装环境">&emsp;一键检测&emsp;
                                    </button>
                                    <button class="layui-btn layui-btn-disabled site-demo-active" disabled id="onenext"  lay-tips="请先检测安装环境">&emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">数据库地址:</label>
                            <div class="layui-input-block">
                                <input name="hostname" value="127.0.0.1" placeholder="请输入数据库地址"
                                       class="layui-input" lay-verType="tips" lay-verify="required" required>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">数据库名:</label>
                            <div class="layui-input-block">
                                <input name="database"  placeholder="请输入数据库名"
                                       class="layui-input" lay-verType="tips" lay-verify="required" required>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">端口:</label>
                            <div class="layui-input-block">
                                <input name="port"  placeholder="请输入端口" value="3306"
                                       class="layui-input" lay-verType="tips" lay-verify="required" required>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label layui-form-required">用户名:</label>
                            <div class="layui-input-block">
                                <input name="username" placeholder="请输入用户名" class="layui-input"
                                       lay-verType="tips" lay-verify="required" required/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">密码:</label>
                            <div class="layui-input-block">
                                <input name="password" placeholder="请输入密码" class="layui-input" type="password"
                                       lay-verType="tips" lay-verify="required" required>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-required">自定义表前缀:</label>
                            <div class="layui-input-block">
                                <input name="pre" placeholder="自定义表前缀" value="jy_" class="layui-input"
                                       lay-verType="tips" lay-verify="required" required>
                            </div>
                        </div>
                        <div class="mysql_msg"></div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-sm layui-btn-normal" id="mysql_check" style="height: 38px;line-height: 38px;" lay-tips="请先测试数据库连接">&emsp;测试连接&emsp;
                                </button>
                                <button id="twonext" class="layui-btn layui-btn-disabled site-demo-active" lay-filter="formStepSubmit1" disabled lay-submit>&emsp;下一步&emsp;
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-progress layui-hide layui-progress-big" id="progress" lay-showpercent="true" lay-filter="demo" style="margin-bottom: 25px;">
                            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                        </div>
                        <div class="layui-form-item">
                            <span class="layui-form-label" id="backmsg"></span>
                        </div>
                        <div class="layui-form-item ins_msg">
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn layui-btn-primary" data-steps="prev"> 上 一 步&nbsp;
                                </button>
                                <button class="layui-btn  site-demo-active"  id="installbtn" data-type="loading" lay-tips="请先检测目录权限">&emsp;开始安装&emsp;
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item text-center" style="padding-top: 40px;">
                        <i class="layui-icon layui-icon-ok layui-circle"
                           style="background: #52C41A;color: #fff;font-size:30px;font-weight:bold;padding: 20px;line-height: 80px;"></i>
                        <div style="font-size: 24px;color: #333;margin-top: 30px;">安装成功</div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">后台地址：<span id="managerUrl"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">账号：<span id="admin"></span></div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">密码：<span id="password"></span></div>
                        <div style="text-align: center;margin: 50px 0 25px 0;">
                            <a id="loginbtn" target="_blank"><button class="layui-btn">登录后台</button></a>
                        </div>
                        <h3 >温馨提示</h3>
                        <div style="text-align: left;margin: 25px 0;">
                            <h4>1.请参考<a href="https://docs.qq.com/doc/DQmhza3NldGtiZlVR" style="color: red">《匠言知识付费安装部署文档》</a>开启后端管理后台伪静态;</h4>
                            <h4>2.参考文档去除putenv()等一系列禁用函数，否则无法完整或正常使用。</h4>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //分布表单结束 -->
            <hr>
            <div style="padding: 10px 30px 20px 30px;">
                <h3 style="text-align: center;margin: 38px 0;">《匠言知识付费安装部署文档》：<a href="https://docs.qq.com/doc/DQmhza3NldGtiZlVR" style="color: red">https://docs.qq.com/doc/DQmhza3NldGtiZlVR</a></h3>
                <h3>安装注意事项</h3><br>
                <h4>1.提示目录权限不足？</h4>
                <p class="layui-text">请保证application目录有读写权限</p>
                <br><h4>2.安装完成</h4>
                <p class="layui-text">为了安全起见，安装完成后，请删除public/install目录下的install.php、install1.php文件</p>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript" src="../static/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../static/assets/js/common.js?v=318"></script>
<script>
layui.use(['layer', 'form', 'steps','element'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var steps = layui.steps;
    var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    /*表单swoole提交事件*/
    $(function(){
        var data={
            'form':'formSwoole'
        }
        $.ajax({
            url:'./install1.php',
            type:'post',
            dataType:'json',
            data:data,
            success:function(res){
                console.log(res)
                var res = res.data;
                if(res.os.is_win != true){
                    $('#swoole_install').text('生成swoole安装脚本');
                }
                $("#systemOs").html("<span style='color: #5FB878;'> "+ res.os.raw_name + "</span>");
                $("#phpVersion").html("<span style='color: #5FB878;'>" + res.php.version + "</span>");
                if (res.php.is_version_ok == 0) {
                    $("#phpVersion").append("<span style='color: #5FB878;'> √</span>");
                } else {
                    $("#phpVersion").append("<span style='color: #FF5722;'> × PHP版本必须为7.1版本</span>");
                }
                $("#phpEnv").html("<span style='color: #5FB878;'>" +res.php.sapi+ "</span>");
                $("#phpIni").html("<span style='color: #5FB878;'>" +res.php.ini_loaded_file+ "</span>");
                $("#phpExt").html("<span style='color: #5FB878;'>" +res.php.extension_dir+ "</span>");
                $("#phpThe").html("<span style='color: #5FB878;'>" +res.php.thread_safety+ "</span>");
                $("#swooleExist").html(res.php.swoole_loader.status);
                $("#swooleVersion").html(res.php.swoole_loader.version).css({color: '#5FB878'});
                if (res.php.swoole_loader.status != '未安装'){
                    $("#zeronext").removeClass('layui-btn-disabled').removeAttr('disabled');
                }
            }
        })
    });
    $('#swoole_install').click(function () {
        var data={
            'form':'swoole_install'
        }
        $.ajax({
            url:'./install1.php',
            type:'post',
            dataType:'json',
            data:data,
            success:function(res){
                console.log(res)
                if(res.code == 0 || res.code == 1){
                    $('#showmsg').html(res.msg).show();
                    $('#showmsg2').show();
                    $('.code_sh').html(res.data).show();
                }
            }
        })
    })

    $('#zeronext').click(function () {
        steps.next('formStepsStep');
        return false;
    });
    /*表单一提交事件*/
    $('#onenext').click(function () {
        steps.next('formStepsStep');
        return false;
    });
    $('#twonext').click(function () {
        steps.next('formStepsStep');
        return false;
    });
    /* 表单二提交事件 */
    $('#mysql_check').click(function () {
        if(!$("input[name='hostname']").val()){
            layer.msg('主机值不能为空',{icon:2,time:1000,shade:0.1})
            return false;
        }
        if(!$("input[name='database']").val()){
            layer.msg('数据库名不能为空',{icon:2,time:1000,shade:0.1})
            return false;
        }
        if(!$("input[name='username']").val()){
            layer.msg('用户名不能为空',{icon:2,time:1000,shade:0.1})
            return false;
        }
        if(!$("input[name='password']").val()){
            layer.msg('密码不能为空',{icon:2,time:1000,shade:0.1})
            return false;
        }
        var data={
            'hostname':$("input[name='hostname']").val(),
            'database':$("input[name='database']").val(),
            'username':$("input[name='username']").val(),
            'password':$("input[name='password']").val(),
            'pre':$("input[name='pre']").val(),
            'port':$("input[name='port']").val(),
            'form':'form1'
        }
        $.ajax({
            url:'./install1.php',
            type:'post',
            dataType:'json',
            data:data,
            success:function(res){
                console.log(res)
                if (res.code == 0) {
                    $(".mysql_msg").html(res.msg);
                    layer.msg(res.msg,{icon:1,time:1500,shade:0.1})
                    $("#twonext").removeClass('layui-btn-disabled').removeAttr('disabled');
                } else {
                    layer.msg(res.msg,{icon:2,time:1500,shade:0.1})
                    return false;
                }
            },
            error:function(err){
                console.log(err)
                $(".mysql_msg").html(err.responseText);
            }
        })
    })
    /* 表单三提交事件 */
    form.on('submit(formStepSubmit2)', function (data) {
        steps.next('formStepsStep');
        return false;
    });
    $('#two_check').click(function () {
        var data={
            'form':'form2'
        }
        $.ajax({
            url:'./install1.php',
            type:'post',
            dataType:'json',
            data:data,
            success:function(res){
                console.log(res)
                if (res.data.sql_code == 0) {
                    $("#checkSql").html("<span style='color: #5FB878;'> √</span>");
                } else {
                    $("#checkSql").html("<p style='color: #FF5722;'> × 关注《匠言知识付费》公众号回复 '数据库' 关键词后即可免费下载.</p>");
                }
                if (res.data.path_code == 0) {
                    $("#checkInfo").html("<span style='color: #5FB878;'>可读写 √</span>");
                } else {
                    $("#checkInfo").html("<span style='color: #FF5722;'> × 无读写权限</span>");
                }
                if (res.data.php_version == 0) {
                    $("#checkPhpVersion").html("<span style='color: #5FB878;'> √</span>");
                } else {
                    $("#checkPhpVersion").html("<span style='color: #FF5722;'> × PHP版本必须为7.1版本</span>");
                }
                if (res.data.sql_code ==0 && res.data.path_code ==0 && res.data.php_version == 0){
                    $("#onenext").removeClass('layui-btn-disabled').removeAttr('disabled');
                }

            }
        })
    })
    $('#installbtn').click(function () {
        $('#progress').removeClass('layui-hide');

    })


    //触发事件
    var active = {
        loading: function(othis){
            var DISABLED = 'layui-btn-disabled';
            if(othis.hasClass(DISABLED)) return;
            var data={
                'form':'form3'
            }
            $.ajax({
                url:'./install1.php',
                type:'post',
                dataType:'json',
                data:data,
                success:function(res){
                    console.log(res)
                    if (res.code == 0) {
                        window.installstate=0
                        var url = window.location.href;
                        var protocol = window.location.protocol;
                        var domain = url.split('/');
                        if( domain[2] ) {
                            domain = domain[2];
                        }
                        var manageUrl=protocol+'//'+domain+'/index.php/admin/login';
                        $("#managerUrl").text(manageUrl);
                        $("#admin").text('admin');
                        $("#password").text('123456');
                        $('#loginbtn').attr('href',manageUrl);
                    } else {
                        $(".ins_msg").html(res.msg);
                        $("#backmsg").html(res.msg+res.data?res.data:'');
                        layer.msg(res.msg+res.data?res.data:'',{icon:2,time:1500,shade:0.1})
                    }
                    //模拟loading
                    var n = 0, timer = setInterval(function(){
                        if (res.code == 1){
                            n = 20;
                        }else {
                            n = n + Math.random()*10|0;
                        }

                        console.log(n)
                        if(n>100 && window.installstate==0){
                            n = 100;
                            $(".ins_msg").html(res.msg);
                            layer.msg('安装成功',{icon:1,time:1500,shade:0.1})
                            clearInterval(timer);
                            // othis.removeClass(DISABLED);
                            othis.val('安装成功');
                            setTimeout(()=>{
                                steps.next('formStepsStep');
                                return false;
                            },1500)
                        }
                        element.progress('demo', n+'%');
                    }, 400+Math.random()*1000);
                    othis.addClass(DISABLED);
                },
                error:function(err){
                    console.log(err)
                    $(".ins_msg").html(err.responseText);
                }
            })

        }
    };
    $('.site-demo-active').on('click', function(){
        var othis = $(this), type = $(this).data('type');
        active[type] ? active[type].call(this, othis) : '';
    });
});
</script>
</body>
</html>